<template>
    <custom-page-box>
        <div class='need-manage-edit-service-container'>
            <div class='header'>
                <div class='left'>
                    <p>{{ formType | getFormName }}</p>
                    <p class='status' :class="auditState === '1' ? 'green' : 'red'" v-if="auditState && auditState !== '0'">{{ auditState === '1' ? '已审核' : '审核失败' }}</p>
                    <p class='message' v-if='rejectEvent.message'>失败原因: {{ rejectEvent.message }}</p>
                    <span v-if='rejectEvent.imgList && rejectEvent.imgList.length' @click='showImg(rejectEvent.imgList[0], rejectEvent.imgList)'>查看图片</span>
                </div>
                <a-button type="primary" @click='goBack'>返回</a-button>
            </div>
            <houses-need v-if="formType === 'houses'" @getAudit='getAudit'></houses-need>
            <plot-need v-if="formType === 'plot'" @getAudit='getAudit'></plot-need>
            <product-need v-if="formType === 'product'" @getAudit='getAudit'></product-need>
            <service-need v-if="formType === 'service'" @getAudit='getAudit'></service-need>
            <talents-need v-if="formType === 'talents'" @getAudit='getAudit'></talents-need>
        </div>
    </custom-page-box>
</template>

<script>
import HousesNeed from '@/components/need-manage/houses'
import PlotNeed from '@/components/need-manage/plot'
import ProductNeed from '@/components/need-manage/product'
import ServiceNeed from '@/components/need-manage/service'
import TalentsNeed from '@/components/need-manage/talents'

export default {
    name: 'NeedManageNeed',
    components: {
        HousesNeed,
        PlotNeed,
        ProductNeed,
        ServiceNeed,
        TalentsNeed
    },
    filters: {
        getFormName (type) {
            switch (type) {
            case 'houses':
                return '房屋需求'
            case 'plot':
                return '地块需求'
            case 'talents':
                return '人才需求'
            case 'product':
                return '农产品需求'
            case 'service':
                return '服务需求'
            }
        }
    },
    data () {
        return {
            rejectEvent: {}
        }
    },
    computed: {
        formType () {
            return this.$route.params.type
        },
        auditState () {
            return this.$route.query.auditState
        }
    },
    created () {

    },
    mounted () {

    },
    methods: {
        getAudit (data) {
            this.rejectEvent = data || {}
        },
        goBack () {
            this.$router.go(-1)
        },
        showImg (url, urls) {
            this.$picturesModal({
                url,
                urls
            })
        }
    }
}
</script>

<style scoped lang='less'>
.need-manage-edit-service-container {
    height: 100%;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        height: 50px;
        padding: 0 20px;
        border-bottom: 1px solid #F3F3F3;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            p {
                font-size: 16px;
            }
            .status {
                width: 80px;
                height: 24px;
                border-radius: 4px;
                color: #fff;
                font-size: 14px;
                line-height: 24px;
                text-align: center;
                margin: 0 20px;
                &.red {
                    background: #FD5454;
                }
                &.green {
                    background: @primary-color;
                }
            }
            .message {
                max-width: 200px;
                line-height: 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
            span {
                border-bottom: 1px solid @primary-color;
                color: @primary-color;
                font-size: 14px;
                line-height: 14px;
                cursor: pointer;
                margin-left: 10px;
            }
        }
    }
}
::v-deep{
  .next-btn{
    display: none;
  }
  button+button{
    margin-left: 120px;
    background-color: @primary-color;
    color: #fff;
    border-color: @primary-color;
  }
}
</style>
